<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>HTML Tables Examples</h1>
<h3>HTML Table - Horizontal Headings</h3>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>
<hr>

<h3>HTML Table - Vertical Headings</h3>
<table style="border: 1px solid red">
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>55577855</td>
    </tr>
</table>
<hr>

<h3>HTML Table - Cells that Span Many Columns</h3>
<table style="border: 1px solid red">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
    </tr>
</table>
<hr>
<h3>HTML Table - Cells that Span Many Rows</h3>
<table style="border: 1px solid red">
    <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>
<hr>
<h3>thead & tbody & tfoot</h3>
<table style="border: 1px solid red">
    <thead style="color: green;">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>60</td>
    </tr>
    </tbody>
    <tfoot style="color: red;">
    <tr>
        <td></td>
        <td>sun</td>
        <td>110</td>
    </tr>
    </tfoot>
</table>
</body>
</html>